Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 🐛 forceScroll error #863

Merged

Conversation

berber1016
Copy link
Contributor

@berber1016 berber1016 commented Aug 26, 2022

fix ant-design/ant-design#37179

当动态新增 columns 时,调用 forceScroll 方法,设置 scrollLeft,并不起作用,发现此时的 scrollLeft 为 0,

MDN文档

如果元素不能滚动(比如:元素没有溢出),那么 scrollLeft 的值是 0。
如果给 scrollLeft 设置的值小于 0,那么 scrollLeft 的值将变为 0。
如果给 scrollLeft 设置的值大于元素内容最大宽度,那么 scrollLeft 的值将被设为元素最大宽度。

此时我打印了 scrollWidth,发现 scrollWidth 与预期不同,正常 scrollWidth 应该为 1800(此值为上方bug链接中的案例), 此时为 358, 与offsetWidth,猜测符合MDN中说的第一条规则,如果元素不能滚动(比如:元素没有溢出),那么scrollLeft 的值是 0

解决办法:
我能想到的就是将 scrollLeft 设置推迟到 dom 更新后执行,不知道有没有更好的办法😮‍💨

@vercel
Copy link

vercel bot commented Aug 26, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
table ✅ Ready (Inspect) Visit Preview Sep 6, 2022 at 3:16AM (UTC)

@berber1016
Copy link
Contributor Author

我可能还需要更新一下测试用例,稍等。

@codecov
Copy link

codecov bot commented Aug 28, 2022

Codecov Report

Merging #863 (bf0a98f) into master (1839388) will increase coverage by 0.00%.
The diff coverage is 100.00%.

❗ Current head bf0a98f differs from pull request most recent head 2036b53. Consider uploading reports for the commit 2036b53 to get more accurate results

@@           Coverage Diff           @@
##           master     #863   +/-   ##
=======================================
  Coverage   99.39%   99.40%           
=======================================
  Files          36       36           
  Lines         999     1004    +5     
  Branches      301      304    +3     
=======================================
+ Hits          993      998    +5     
  Misses          6        6           
Impacted Files Coverage Δ
src/Table.tsx 99.21% <100.00%> (+0.01%) ⬆️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@berber1016
Copy link
Contributor Author

@afc163 Excuse me, who can take care of this PR

@afc163 afc163 requested a review from zombieJ September 5, 2022 04:02
@zombieJ
Copy link
Member

zombieJ commented Sep 5, 2022

这样延迟过于明显了:

Kapture.2022-09-05.at.14.43.10.mp4

@berber1016
Copy link
Contributor Author

iShot_2022-09-05_19.15.12.mp4

这是原有效果,我理解始终是有延迟问题,想解决这个问题本质上需要重新设计滚动😄

@willwu9304
Copy link

@zombieJ @berber1016 比较好奇为啥我设置了 sticky 后延迟的问题会很明显,没设置之前几乎感觉不到。这里面是有逻辑差异吗

@berber1016
Copy link
Contributor Author

@zombieJ @berber1016 比较好奇为啥我设置了 sticky 后延迟的问题会很明显,没设置之前几乎感觉不到。这里面是有逻辑差异吗

能提供一个复现案例吗,听上去不太像我这个mr引入的问题

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Table横向滚动到任一位置,动态新增了Column后,滚动位置发生了变化
3 participants